<style lang="less">
    @import './styles/menu.less';
</style>

<template>
    <div class="menu">
        <template v-if="!shrink"> 
            <div  class="ivu-notshrink-menu">      
                <vertical-menu
                    :menu-list="menuList"          
                    @on-change="handleChange"
                    :theme = "theme"
                ></vertical-menu>
            </div>
        </template>
        <template v-else> 
            <div :style="{background: theme.background}" class="ivu-shrinkable-menu">
                <sidebar-menu-shrink 
                    :menu-list="menuList"          
                    @on-change="handleChange"
                ></sidebar-menu-shrink>
            </div>
        </template>
    </div>
</template>
<script>

export default {
    name: 'shrinkableMenu',
    components: {
   
    },
    data(){
        return {

        }
    },
    mounted() {

    },
    props: {
        theme:{
            type: Object,
            default:{}
        },
        shrink: {
            type: Boolean,
            default: false
        },
        menuList: {
            type: Array,
            required: true
        },
    },
    computed: {

    },
    methods: {
        /**
         * 生成 key 值
         */
        indexKey: function (index) {
          return index.toString()
        },
        handleChange (index) {
          this.$store.commit('increateTag', this.menuList[index].children[0])
        }
    }
};
</script>
